<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跑腿界面</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/pagination.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/dcalendar.picker.js"></script>
		<script src="./js/validate.js"></script>
			
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/dcalendar.picker.css">
	</head>
	<body>
		<div id="app" class="container">
			<div style="text-align: center;">
				<h1>跑腿者----{{user.nickname}}</h1>
			</div>
			<button type="button" class="btn btn-success" @click="showModal">查看新订单</button>
			<button type="button" class="btn btn-success" @click="toMyUser">我的</button>
			<select style="" v-model="seid" @change="selectstatus">
				<option value="0">请选择</option>
				<option value="1">审核中</option>
				<option value="2">未通过</option>
				<option value="4">已取消</option>
				<option value="6">待确认</option>
				<option value="5">派送中</option>
				<option value="9">待评价</option>
				<option value="8">待付款</option>
			</select>
			<table class="table table-bordered table-striped">
				<tr>
					<th>编号</th>
					<th>订单名称</th>
					<th>图片</th>
					<th>订单金额</th>
					<th>发单用户</th>
					<th>订单状态</th>
					<th>订单详情</th>
					<td>评价</td>
				</tr>
				<tr v-for="l in list">
					<td>{{l.oid}}</td>
					<td>{{l.ordername}}</td>
					<td>
						<img :src="l.orderimage" width="50px" height="50px" />
					</td>
					<td>{{l.amout}}</td>
					<td>{{l.nickname}}</td>
					<td>{{l.name}}</td>
					<td>{{l.ordertext}}</td>
					<td v-if="l.estimate!=null">{{l.estimate}}</td>
					<td v-if="l.estimate==null">无评价</td>
					<th v-if="l.statusid==5">
						<button type="button" class="btn btn-success" @click="queren(l.oid)">确认送达</button>
					</th>
					
				</tr>
			</table>
			
			<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body">
							<div class="form-group" style="text-align: center;">
								<label>
									<h2>抢单</h2>
								</label>
							</div>
							<table class="table table-striped table-bordered">
								<tr>
									<th>编号</th>
									<th>订单名称</th>
									<th>发单人</th>
									<th>订单金额</th>
									<th>图片</th>
									<th>发起时间</th>
									<th>操作</th>
								</tr>
								<tr v-for="m in mlist">
									<td>{{m.id}}</td>
									<td>{{m.name}}</td>
									<td>{{m.nickname}}</td>
									<td>{{m.amout}}</td>
									<td>
										<img :src="m.image" width="50px" height="50px"/>
									</td>
									<td>{{m.billtime | formatDate}}</td>
									<td>
										<button type="button" class="btn btn-success" @click="Qiangdan(m.id)" v-if="user.status==true">抢单</button>
										<button type="button" class="btn btn-success" @click="qiangdan" v-if="user.status==false">抢单</button>
									</td>
								</tr>
							</table>
							<div class="modal-footer">
								<div class="form-group">
									<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				messagephond:{},
				id:0,
				list:[],
				mlist:[],
				seid:0,
				user:{}
			},
			methods:{
				showModal(){
					$('#myModal').modal("show");
				},
				qiangdan(){
					alert("你已经被禁止不能抢单")
				},
				getLoginId(){
					var id1=document.URL.split('=')[1];
					this.id=id1;
					axios.post("http://localhost:10010/api/item/user/findUserByuserid?userid="+this.id).then(function(response){
							vue.user=response.data;
							console.log(vue.user+"---")
					});
				},
				getPtOrder(){
					axios.post("http://localhost:10010/api/item/qidan/findPaotuiorder?ptid="+this.id).then(function(response){
						vue.list=response.data;
					});
				},
				getMessagePond(){
					axios.get("http://localhost:10010/api/item/qidan/findAllMessagepond").then(function(response){
						vue.mlist=response.data;
					})
				},
				toMyUser(){
					window.location.href="my.html?id="+this.id;
				},
				selectstatus(){
					axios.post("http://localhost:10010/api/item/qidan/selectstatus?ptid="+this.id+"&seid="+this.seid).then(function(response){
						vue.list=response.data;
					});
				},
				Qiangdan(id){
					axios.post("http://localhost:10010/api/item/qidan/Qingdan?oid="+id+"&ptid="+this.id).then(function(response){
						alert("抢单成功")
						$('#myModal').modal("hide");
						console.log(response.data);
						axios.post("http://localhost:10010/api/item/qidan/selectstatus?ptid="+vue.id+"&seid=5").then(function(response){
							vue.list=response.data;
						});
					});
				},
				queren(id){
					// alert("id"+id)
					axios.post("http://localhost:10010/api/item/qidan/queren?oid="+id).then(function(response){
						axios.post("http://localhost:10010/api/item/qidan/selectstatus?ptid="+vue.id+"&seid=6").then(function(response){
							vue.list=response.data;
						});
					});
				}
			},
			created() {
				this.getLoginId();
				if(this.id!=0){
					this.getPtOrder();
					this.getMessagePond()
					this.selectstatus()
				}else{
					window.location.href="login.html"
				}
				axios.post("http://localhost:10010/api/item/user/findUserByuserid?userid="+this.id).then(function(response){
						if(response.data==""){
							window.location.href="login.html"
						}
				});
				
			},
			filters : {
				formatDate : function(time) {
					if (time != null && time != "") {
						var date = new Date(time);
						var year = date.getFullYear();
						var month = date.getMonth() + 1;
						month=month<10? "0" +month :month;
						var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			     
						// var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
						// var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
						// var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						return year+"-"+month+"-"+day;
					} else {
						return "";
					}
				}
			},
		});
	</script>
</html>
